<template>
	<view class="container">
		<view class="list-container margin-top padding-left padding-right">
			<view :url="`/pages/coach/show?id=${item.id}`" v-for="(item, index) in coaches" :key="index" class="primary-bg i-list-item radius margin-top flex align-center">
				<view class="image-wrapper radius margin-left-xs">
					<image @tap="previewImage" :data-src="item.cover_url + '?v=' + Math.random()" class="i-image" :src="item.cover_url + '?v=' + Math.random()" mode="aspectFit"></image>
				</view>
				<view @tap="showCoach(item.id)" class="info-wrapper padding-right-sm padding-bottom-xs flex flex-direction justify-between">
					<view class="main-info-wrapper">
						<view class="text-white margin-top-xs">
							<text class="title text-xl">{{item.realname}}</text>
							<text class="text-gray margin-left-xs text-sm">{{item.brief_intro_ellipsis}}</text>
						</view>
						<view class="expert text-xs flex margin-top-sm">
							<view class="expert-item bg-white margin-right-xs" v-for="(expertItem, expertIndex) in item.expert" :key="expertIndex">{{expertItem}}</view>
						</view>
					</view>
					<view class="price-info flex justify-between">
						<view class="text-white text-sm">起售节数：{{item.sale_num}}</view>
						<view><text class="text-xl price">¥{{item.price}}</text><text class="text-white">/节</text></view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import util from '@/utils/util.js';
import coach from '@/api/coach.js';

export default {
	data() {
		return {
			coaches: []
		}
	},
	onLoad() {
		let _this = this;
		_this.getCoaches();
	},
	onPullDownRefresh() {
		let _this = this;
		_this.getCoaches();
		uni.stopPullDownRefresh();
	},
	methods: {
		async getCoaches() {
			const res = await coach.list();
			this.coaches = res.data;
		},
		previewImage(e) {
			const current = e.target.dataset.src;
			uni.previewImage({
				urls: [current],
			});
		},
		showCoach(id) {
			const url = `/pages/coach/show?id=${id}`;
			util.toPage(url);
		}
	}
}
</script>

<style scoped lang="less">
.list-container {
	.i-list-item {
		height: 220upx;
		.image-wrapper {
			width: 200upx;
			height: 200upx;
			.i-image {
				border-radius: 10upx;
				height: 100%;
			}
		}
		.info-wrapper {
			margin-left: 15upx;
			width: 100%;
			height: 100%;
			.expert {
				.expert-item {
					padding: 3upx 8upx;
					border-radius: 5upx;
				}
			}
			.price-info {
				width: 100%;
				.price {
					color: #f6ca44;
				}
				// .market-price {
				// 	color: #939496;
				// 	text-decoration:line-through; 
				// }
			}
		}
		.btn-area {
			margin-left: 60upx;
			.btn-buy {
				width: 120upx;
				height: 44upx;
				line-height: 44upx;
				border-radius: 4upx;
				background: #485575;
				border: none;
			}
		}
	}
}
</style>
